<template>
  <view v-if="id == 1">
    <!-- 积分 -->
    <view class="integral">
      <text class="title">近期积分记录</text>
      <view class="integral-box" v-for="(item, index) in listData" :key="index">
        <view class="left">
          <!-- 店名+什么方式的积分(次卡消费、前台充值、小程序会员充值) -->
          <text class="name">{{ item.StockName }} {{ item.FRemark }} 新增</text>
          <text class="tiem">{{ item.FDate }}</text>
        </view>
        <view class="right">
          <text class="price">{{ item.FPoint + item.FSetPoint }}</text>
          <text class="unit">积分</text>
        </view>
      </view>
      <uni-load-more
        style="width: 100%"
        v-if="!listData || listData.length == 0"
        class="loadmore"
        :status="tabItem.loadingType"
      ></uni-load-more>
    </view>
    <view class="integral-base">
      <view class="left">
        <text class="base-title">积分</text>
        <text class="price">{{ integra }}</text>
      </view>
      <!-- <text class="topUp" @click="navTo()">积分商城<text class="yticon icon-you"></text></text> -->
    </view>
  </view>
  <view v-else>
    <!-- 余额 -->
    <view class="balance">
      <!-- <text class="title">近期余额记录</text> -->
      <view class="head" @click="onActive">
        <text :class="{ active: titleIndex == 1 }" :data-index="1">充值</text>
        <text :class="{ active: titleIndex == -1 }" :data-index="-1">消费</text>
        <text :class="{ active: titleIndex == 3 }" :data-index="3">次卡</text>
      </view>
      <view class="data-box">
        <view v-show="!startDate">全部</view>
        <view v-show="startDate">{{ startDate }}--{{ endDate }}</view>
        <view @click="calendarVisible = true">选择时间</view>
      </view>
      <view class="balance-box" v-for="(item, index) in listData" :key="index">
        <view class="left" :class="{ topUpleft: item.FDataType != 3 }">
          <!-- 店名+什么方式的消费(次卡消费、前台充值、小程序会员充值) -->
          <text class="name"
            >{{ item.StockName }} {{ item.FRemark }}
            {{
              item.FDataType == 3
                ? item.MemberTimeName + "卡--" + item.MemberTime + "次"
                : ""
            }}</text
          >
          <text class="tiem">{{ item.FDate }}</text>
        </view>
        <view v-if="item.FDataType != 3" class="right">
          <view v-if="item.FDataType == -3" class="right">
            <text class="price">1</text>
            <text class="unit">次</text>
          </view>
          <view v-else class="right">
            <text class="price">{{ item.FAmount.toFixed(2) }}</text
            ><text class="unit">元</text>
            <text v-if="item.FSetAmount != 0"
              >赠送¥{{ item.FSetAmount.toFixed(2) }}</text
            >
          </view>
        </view>
        <view v-else class="right">
          <text class="price">{{ item.MemberTimeAmt }}</text>
          <text class="unit">元</text>
        </view>
      </view>
      <uni-load-more
        style="width: 100%"
        v-if="!listData || listData.length == 0"
        class="loadmore"
        :status="tabItem.loadingType"
      ></uni-load-more>
    </view>
    <view class="bottom-bar">
      <view class="left">
        <text class="base-title">当前余额:</text>
        <text class="price">
          <text class="synbol">￥</text>
          {{ money }}
        </text>
      </view>
      <text class="topUp" @click="navTo('/pages/member/deposit')">
        去充值
      </text>
    </view>
    <u-calendar
      :show="calendarVisible"
      mode="range"
      @confirm="onDateChange"
      @close="calendarVisible = false"
      :minDate="minDate"
      :maxDate="maxDate"
    ></u-calendar>
  </view>
</template>

<script>
import { reqPost } from "../../../common/http.request";
import date from "../../../utils/date";

export default {
  data() {
    return {
      calendarVisible: false,
      id: 0,
      listData: [],
      pageindex: 0,
      money: 0,
      integra: 0,
      totalNumber: 0,
      loadingType: "more", //加载更多状态
      titleIndex: 1, //tab 切换状态
      startDate: "",
      endDate: "",
    };
  },
  computed: {
    minDate() {
      return date.getDate(-83);
    },
    maxDate() {
      return date.getDate(7);
    },
  },
  onLoad(options) {
    this.id = options.id;
    let title = "";
    if (this.id == 0) {
      title = "余额记录";
      this.balance("GetMemberDeposit");
    } else {
      title = "积分记录";
      this.balance("GetMemberPoint");
    }
    uni.setNavigationBarTitle({
      title,
    });
  },
  onReachBottom() {
    if (this.id == 0) {
      this.balance("GetMemberDeposit");
    } else {
      this.balance("GetMemberPoint");
    }
  },
  methods: {
    onDateChange(e) {
      // console.log('data',e);
      this.startDate = e[0];
      this.endDate = e[e.length - 1];
      this.balance("GetMemberDeposit");
      this.calendarVisible = false;
    },
    navTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    async balance(url) {
      // this.pageindex++;
      let list = (
        await reqPost(url, {
          DataType: this.titleIndex || "",
          DateStar: this.startDate || "",
          DateEnd: this.endDate || "",
          PageIndex: this.pageindex,
          PageSize: 20,
        })
      ).Data;
      let member = uni.getStorageSync("Members");
      this.listData = this.listData.concat(list);
      console.log(this.listData, "listData");
      console.log(this.integra, "integra");
      this.money =
        this.listData[0].FDataType == -3
          ? member[0].Amount
          : this.listData[0].FLastAmount;
      this.totalNumber = this.listData[0].FRowCount;
      // 判断是否还有下一页，有是more  没有是nomore
      this.loadingType =
        this.listData.length >= this.listData[0].FRowCount ? "nomore" : "more";
    },

    //点击切换
    onActive(e) {
      this.titleIndex = e.target.dataset.index;
      this.balance("GetMemberDeposit");
    },
  },
};
</script>

<style lang="scss">
.title {
  background: #f9f9f9;
  color: #191919;
  font-size: 24rpx;
  line-height: 92rpx;
  width: 100%;
  padding-left: 30rpx;
}

.head {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: space-around;
  position: fixed;
  top: 0rpx;

  text {
    padding: 0 50rpx;
  }
}

.active {
  border-bottom: 2rpx solid #fa436a;
}

.box {
  padding: 140rpx 20rpx 0 20rpx !important;
}
.data-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 100rpx;
  padding: 20rpx 28rpx;
  background-color: #fefefe;
}
.balance,
.integral {
  display: flex;
  flex-wrap: wrap;

  .balance-box:last-child,
  .integral-box:last-child {
  }

  .balance-box,
  .integral-box {
    border-bottom: 2rpx solid #f9f9f9;
    height: auto;
    width: 100%;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 100%;
      font-size: 28rpx;
      // line-height: 50rpx;
      .name {
        color: #707070;
        width: 100%;
        float: left;
      }
      .tiem {
        color: #a7a7a7;
        width: 100%;
        float: left;
      }
    }

    .right {
      color: #111111;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      .price {
        line-height: 100rpx;
        font-size: 20px;
        display: inline-block;
      }

      .unit {
        font-size: 12px;
        line-height: 24rpx;
        display: inline-block;
        vertical-align: top;
      }
    }
  }
}

.balance-base,
.integral-base {
  position: fixed;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {
    width: 100%;
    height: 100rpx;
    padding-left: 28rpx;
    color: #191919;
    display: flex;
    align-items: center;
    background: #ffdd55;

    .base-title {
      font-size: 28rpx;
      line-height: 38rpx;
      display: inline-block;
      vertical-align: top;
    }

    .price {
      margin-left: 10rpx;
      font-size: 56rpx;
      line-height: 80rpx;

      .synbol {
        font-size: 26rpx;
      }
    }
  }

  .topUp {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 28rpx;
    color: #191919;
    line-height: 80rpx;
    background: rgba(255, 0, 0, 1);
    color: #fff;
    flex-shrink: 0;
  }
}

.loadmore {
  margin-bottom: 85rpx;
}

.member-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 10px 30px;
  background-color: #fff;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 1);
  .left {
    width: 100%;
    height: 100rpx;
    padding-left: 28rpx;
    color: #191919;
    display: flex;
    align-items: center;
    background: linear-gradient(120deg, #f9745a 0%, #ffdd55 100%);

    .base-title {
      font-size: 28rpx;
      line-height: 38rpx;
      display: inline-block;
      vertical-align: top;
    }

    .price {
      margin-left: 10rpx;
      font-size: 56rpx;
      line-height: 80rpx;

      .synbol {
        font-size: 26rpx;
      }
    }
  }
  .topUp {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 28rpx;
    color: #191919;
    line-height: 80rpx;
    background: linear-gradient(270deg, #f9745a 0%, #ff9e01 100%);
    color: #fff;
    flex-shrink: 0;
  }
}
</style>
